<template>
  <div class="left-chart-2">
    <div class="lc2-header">成果类别信息</div>
   <!-- <div class="lc2-details">设备运行总数<span>245</span></div>-->
    <dv-charts class="lc2-chart" :option="option" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>


  import { listAchievement } from "@/api/module/gs/dashuju";
export default {
  name: 'LeftChart2',
  data () {
    return {
      option: {

        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
      },
      jishu:0,
      faming:0,
      shiyong:0,
      ruanjian:0
    }
  },
  created() {
    this.getjishu();
    this.getfaming();
    this.getshiyong();
    this.getruanjian();
    this.$watch(
      () => [this.jishu, this.faming, this.shiyong,this.ruanjian],
      () => {
        this.createData();
      }
    );
  },
  methods: {


    getjishu() {
      this.loading = true;
      const queryParams = { resultCategory: "3" };
      listAchievement(queryParams).then(response => {
        this.jishu = response.rows.length;
      });
    },

    getfaming() {
      this.loading = true;
      const queryParams = { resultCategory: "0" };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.faming = response.rows.length;
      });
    },

    getshiyong() {
      this.loading = true;
      const queryParams = { resultCategory: "1" };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.shiyong = response.rows.length;
      });
    },
    getruanjian() {
      this.loading = true;
      const queryParams = { resultCategory: "2" };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.ruanjian = response.rows.length;
      });
    },

    createData () {
      const { randomExtend } = this
console.log(this.faming+"this.faming")
      console.log(this.shiyong+"this.shiyong")
      console.log(this.ruanjian+"this.ruanjian")
      console.log(this.jishu+"this.jishu")

      this.option = {
        series: [
          {
            type: 'pie',
            data: [
              { name: '发明专利', value:this.faming },
              { name: '实用新型专利 ', value: this.shiyong},
              { name: '软件著作权', value: this.ruanjian },
              { name: '技术', value: this.jishu },
            ],
            radius: ['45%', '65%'],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '{percent}%\n{name}',
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ],
      }
    },


  }


}
</script>

<style lang="less">
.left-chart-2 {
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;

  .lc2-header {
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin-bottom: 20px;
  }

  .lc2-details {
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc2-chart {
    height: calc(~"100% - 80px");
  }
}
</style>
